<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input type="button" v-on:click="add" value="点我出发add方法">
    <input type="button" v-on:click="show" value="点我show方法">
    <input type="button" v-on:click="change" value="点我change方法">
    <input type="button" v-on:click="findAll" value="点我findall方法">

    <h1>{{username}}</h1>
    <h1>{{num}}</h1>

    <table border="2" width="100%">
        <tr>
            <td>userName</td>
            <td>age</td>
            <td>name</td>
            <td>email</td>
        </tr>
        <tr v-for="user in users">
            <td>{{user.userName}}</td>
            <td>{{user.age}}</td>
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>
        </tr>
    </table>
    <hr>
    <div id="login">
    <h1>登录</h1>
    <form method="post">
    username<input type="text" name="userName" id="userName" v-model="user.userName">
    password<input type="password" name="password"  id="password" v-model="user.password">
    <input type="button" v-on:click="go()" value="登录">
    </form>
    </div>
</div>





</body>
<script src="./vue/vue.js"></script>
<script src="./axios/dist/axios.js"></script>
<script>


    var vm = new Vue({
        el: "#app",
        data:{
            username:"",
            num:0,
            users:[],
        },
        methods:{
            add(){
                axios.get("/student/add").then((resp)=>{
                    console.log(resp)
                    this.username=resp.data
                })
            },
            show(){
                axios.get("/student/show?id=99").then((resp)=>{
                    console.log(resp)
                    this.num=resp.data
                })
            },
            change(){
                axios.post("/student/change",{
                    userName:"qqq",age:10
                }).then((resp)=>{
                    console.log(resp)
                    this.num=resp.data
                })
            },

            findAll(){
                axios.get("/user/findAll").then((resp)=>{
                    this.users=resp.data
                })
            }

        }

    })

    export default {
        name: 'login',
        data () {
            return {
                user : {}
            }
        },
        methods: {
            go(){
                axios.post("/user/login",this.user).then((resp)=>{
                    console.log(resp)
                    if (resp.data){
                        alert("登陆成功")
                    }
                })
            }
        },
    }



</script>


</html>